<template>
	<div class="c-form">
		<el-dialog v-if="hasDialog" :visible="visible" :title="title" :width="width" :show-close="showClose">
			<el-form :model="form" ref="d-form" :labelWidth="labelWidth" class="demo-ruleForm" label-position="left">
				<el-row>
					<el-col :span="item.span || 24" v-for="(item, index) in items" :key="index"
						v-show="item.hidden ? !item.hidden : true" style="margin-bottom: 5px;">
						<el-form-item :label="item.label" :prop="item.prop"
							:rules="(item.hidden && item.hidden) ? null : item.rules" >
							<el-tooltip :disabled="!item.tip" effect="dark" :content="item.tip" placement="top">
								<slot v-if="item.type === 'slot'" :name="item.prop" :form="form" :formItem="item"></slot>
								<el-component v-else v-model="form[item.prop]" :type="item.type" :on="item.on || {}"
									:attrs="item.attrs || {}" :options="item.options || []"
									:disabled="item.disabled ? item.disabled : false"
									:readonly="item.readonly ? item.readonly : false" :style="{width: item.width}"></el-component>
							</el-tooltip>
						</el-form-item>
					</el-col>
					<slot></slot>
				</el-row>
				<!-- <el-row>
					<el-form-item>
						<el-button type="primary" size="small" @click="onSubmit">确 定</el-button>
						<el-button size="small" @click="onCancel">取 消</el-button>
					</el-form-item>
				</el-row> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="onCancel">取 消</el-button>
				<el-button type="primary" @click="onSubmit">{{submitBtnText}}</el-button>
			</span>
		</el-dialog>
		<el-form v-else :model="form" ref="d-form" :label-width="labelWidth" class="demo-ruleForm" label-position="left">
				<el-row>
					<el-col :span="item.span || 24" v-for="(item, index) in items" :key="index"
						v-show="item.hidden ? !item.hidden : true" style="margin-bottom: 10px;">
						<el-form-item :label="item.label" :prop="item.prop"
							:rules="(item.hidden && item.hidden) ? null : item.rules">
							<el-tooltip :disabled="!item.tip" effect="dark" :content="item.tip" placement="top">
								<slot v-if="item.type === 'slot'" :name="item.prop" :form="form" :formItem="item"></slot>
								<el-component v-else v-model="form[item.prop]" :type="item.type" :on="item.on || {}"
									:attrs="item.attrs || {}" :options="item.options || []"
									:disabled="item.disabled ? item.disabled : false"
									:readonly="item.readonly ? item.readonly : false" :style="{width: item.width}"></el-component>
							</el-tooltip>
						</el-form-item>
					</el-col>
					<slot></slot>
				</el-row>
				<el-row v-if="hasActionBtn">
					<el-form-item>
						<el-button type="primary" @click="onSubmit">{{submitBtnText}}</el-button>
						<!-- <el-button @click="onCancel">取 消</el-button> -->
					</el-form-item>
				</el-row>
			</el-form>
	</div>
</template>

<script>
// 验证器文档地址:https://github.com/yiminghe/async-validator
import elComponent from './lib/el-component.js';
export default {
	components: {
		elComponent
	},
	name: 'el-dialog-form',
	// model: {
	// 	prop: 'visible'
	// },
	props: {
		// 是否显示dialog
		visible: {
			type: Boolean,
			default: false
		},
		// 标题
		title: {
			type: String,
			default: ""
		},
		// 宽度
		width: {
			type: String,
			default: ""
		},
		// 表单项
		items: {
			type: Array,
			default: []
		},
		// 表单值
		form: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 是否需要弹窗
		hasDialog: {
			type: Boolean,
			default: true
		},
		labelWidth: {
			type: String,
			default: "100px"
		},
		hasActionBtn:{
			type: Boolean,
			default: true,
		},
		submitBtnText:{
			type: String,
			default: "确 定"
		},
		showClose:{
			type: Boolean,
			default: false,
		}
	},
	methods: {
		onSubmit() {
			this.$refs['d-form'].validate((valid) => {
				if (valid) {
					this.$emit('submit', this.form);
				}
			})
		},
		onCancel() {
			this.$emit('update:visible', false);
			this.$emit('cancel');
		},
		close() {
			this.$emit('update:visible', false);
		},
		validateField(variable){
            this.$refs['d-form'].validateField(variable)
		},
	}
}
</script>

<style>
.el-form-item {
	margin-bottom: 15px !important;
}
</style>
